<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html style="height:100%;min-height: 580px;"><head>
    <title>荩美国际商城</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <link href="/resources/frontcss/cart.css" rel="stylesheet">
    <script src="/resources/js/jquery-1.8.1.min.js" type="text/javascript"></script>
    <style>
        .top-cot{ width:100%; height:2.2rem; line-height:2.2rem; background:#28163d; color:#fff; text-align:center; font-size:16px;}
    </style>
</head>
<body style="background-color: #fff;overflow-x:hidden;">
<div class="top-cot">
    <h3>区域业绩</h3>
</div>
<div class="takeinfo" style="padding-bottom: 40px;margin-bottom: 30px;background-color: #fff;">
    <label><p>选择年份</p>
       <select id="year" name="year">
           <option value="2017">2017年</option>
           <option value="2018">2018年</option>
           <option value="2019">2019年</option>
           <option value="2020">2020年</option>
           <option value="2021">2021年</option>
       </select>
    </label><br>
    <label><p>选择月份</p>
        <select id="month" name="month">
            <option value="">请选择</option>
            <option value="01">一月</option>
            <option value="02">二月</option>
            <option value="03">三月</option>
            <option value="04">四月</option>
            <option value="05">五月</option>
            <option value="06">六月</option>
            <option value="07">七月</option>
            <option value="08">八月</option>
            <option value="09">九月</option>
            <option value="10">十月</option>
            <option value="11">十一月</option>
            <option value="12">十二月</option>
        </select>
    </label><br>
    <c:if test="${user.userLevel eq '0'}">
        <label><p>地市</p>
            <select id="queryCity" name="queryCity" onchange="reloadArea()">
                <option value="">请选择</option>
            </select>
        </label><br>
    </c:if>

    <c:if test="${user.userLevel eq '0' or user.userLevel eq '1' or user.userLevel eq '2'}">
        <label><p>区县</p>
            <select id="queryArea" name="queryArea">
                <option value="">请选择</option>
            </select>
        </label><br>
    </c:if>

     <input type="hidden" id="userLevel" name="userLevel" value="${user.userLevel}"/>
    <input type="hidden" id="province" name="province" value="${user.userProvince}"/>
    <input type="hidden" id="city" name="city" value="${user.userCity}"/>
    <input type="hidden" id="area" name="area" value="${user.userArea}"/>
    <button   onclick="submit()" id="query" style="background: #bf2072;text-align: center;width: 105px;
            height:40px;border: none;color: #fff;font-size: 16px;font-weight: bold;float:right;">查询</button>
</div>
<div style="padding-left: 20px;">
    <table style="width: 100%;">
        <tr>
            <td colspan="2"><span style="font-weight: bold;font-size: 16px;">会员统计</span></td>
        </tr>
        <tr>
            <td>会员总数：<span id="userTotal" onclick="showDetails(0)">0</span></td>
            <td>普通用户：<span id="userCnt"  onclick="showDetails(1)">0</span></td>
        </tr>
        <tr>
            <td>金牌代理：<span id="goldCnt" onclick="showDetails(2)">0</span></td>
            <td>全国总代：<span id="generalCnt" onclick="showDetails(3)">0</span></td>
        </tr>
        <tr>
            <td>区域合伙人：<span id="partnerCnt" onclick="showDetails(4)">0</span></td>
        </tr>
        <tr>
            <td colspan="2"><span style="font-weight: bold;font-size: 16px;">业绩统计</span></td>
        </tr>
        <tr>
            <td>订单数：<span id="orderCnt">0</span></td>
            <td>区域业绩：<span id="totalMoney">0</span>元</td>
        </tr>
        <tr>
            <td>购物订单数：<span id="gwOrder">0</span></td>
            <td>升级订单数：<span id="sjOrder">0</span></td>
        </tr>
    </table>

</div>


<script type="text/javascript">
    $(function(){
        var level = '${user.userLevel}';
        if(level=='0'){//省级
            loadCity();
        }else if(level=='1' || level=='2'){
            loadArea();
        }
        $("#query").click();
    })

    function submit(){
        var queryCity = $("#queryCity");
        if(queryCity!=undefined){
            var queryCity = $("#queryCity").val();
            if(queryCity!=null){
                $("#city").val(queryCity);
            }
        }
        var queryArea = $("#queryArea");
        if(queryArea!=undefined){
            var queryArea = $("#queryArea").val();
            if(queryArea!=null){
                $("#area").val(queryArea);
            }
        }
        $.ajax({
            url:"/front/user/team/queryArea?r="+Math.random(),
            type:"post",
            data:{
                year:$("#year").val(),
                month:$("#month").val(),
                userLevel:$("#userLevel").val(),
                province:$("#province").val(),
                city:$("#city").val(),
                area:$("#area").val()
            },
            success:function(res){
                if(res.success){
                    $("#orderCnt").html(res.data.orderCnt);
                    $("#userTotal").html(res.data.userTotal);
                    $("#userCnt").html(res.data.userCnt);
                    $("#goldCnt").html(res.data.goldCnt);
                    $("#generalCnt").html(res.data.generalCnt);
                    $("#partnerCnt").html(res.data.partnerCnt);
                    $("#totalMoney").html(res.data.totalMoney);
                    $("#gwOrder").html(res.data.gwOrder);
                    $("#sjOrder").html(res.data.sjOrder);
                }
            },
            error:function(){}
        })
    }

    function loadCity(){
        $.ajax({
            url:"/front/loadCitys?r="+Math.random(),
            type:"post",
            data:{
                pid:$("#province").val()
            },
            success:function(res){
                if(res.success){
                    fillSelect("queryCity",res.data);
                    loadArea();
                }
            },
            error:function(){

            }
        });
    }
    function loadArea(){
        $.ajax({
            url:"/front/loadCitys?r="+Math.random(),
            type:"post",
            data:{
                pid:$("#city").val()
            },
            success:function(res){
                if(res.success){
                    fillSelect("queryArea",res.data);
                }
            },
            error:function(){

            }
        });
    }

    function reloadArea(){
        $.ajax({
            url:"/front/loadCitys?r="+Math.random(),
            type:"post",
            data:{
                pid:$("#queryCity").val()
            },
            success:function(res){
                if(res.success){
                    fillSelect("queryArea",res.data);
                }
            },
            error:function(){

            }
        });
    }

    function fillSelect(id,data){
        var html = "<option value=''>请选择</option>";
        $.each(data,function(i,n){
            var ckd = "";
            html += "<option value='"+n.no+"' "+ckd+">"+n.name+"</option>";
        });
        $("#"+id).html(html);
    }

    function  showDetails(i) {
        window.location.href = "/front/user/team/userDetails?year="+$("#year").val()+"&month="+$("#month").val()+"&province="+$("#province").val()+"&city="+$("#city").val()+"&area="+$("#area").val()+"&index="+i;
    }

</script>

</body>
</html>